import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import Example from '../../../examples/font-awesome-icons';

<Head>
  <title>Custom Icons Feature Guide - Mantine React Table Docs</title>
  <meta
    name="description"
    content="How to use custom icons such as from Font Awesome in Mantine React Table"
  />
</Head>

## Custom Icons Feature Guide

Mantine React Table uses [Tabler Icons](https://tabler-icons.io/) by default for all of its internal icons.

If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Tabler Icons or icons from a completely different library.

### Relevant Table Options

<TableOptionsTable onlyOptions={new Set(['icons'])} />

### Replace with Custom Icons

To replace a default icon, specify the icon in the `icons` prop. You should get TS hints for the name of the icons you can replace, but you can also consult [this source file](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/icons.ts) for a list of all the icons you can replace.

```tsx
const faIcons: Partial<MRT_Icons> = {
  //change sort icon, connect internal props so that it gets styled correctly
  IconArrowDown: (props) => <FontAwesomeIcon icon={faSortDown} {...props} />,
  IconSearch: () => <FontAwesomeIcon icon={faSearch} />,
  IconArrowsSort: (props) => (
    <FontAwesomeIcon icon={faArrowDownWideShort} {...props} />
  ),
};

const table = useMantineReactTable({
  columns,
  data,
  icons: faIcons,
});
```

Some icons have `style` props that get applied to them internally. So, in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in `{...props}` to your custom icon component as a best practice.

### Font Awesome Example

Here is an example where we use icons from a completely different library, [Font Awesome](https://fontawesome.com/).

> Note: This example is only using the free solid icons from Font Awesome. If you want to use the pro icons, you will need to import the pro icons from Font Awesome and use those instead.

<Example />
